import React, { PureComponent } from 'react';
import { connect } from 'react-redux'
import { message } from 'antd'
import PropTypes from 'prop-types'
import DataGrid from './DataGrid';
import DataList from './DataList';
import { setListForm } from '../../../../../redux/actions/listForm';
import { ALL_FILE, COMMON_SUCCESS_STATE, DIRECTORIES, FILES } from '../../../../../constant';
import { getFolderById } from '../../../../../api';
import { removeFolder, setFolder } from '../../../../../redux/actions/folder';
import 'antd/lib/message/style'
import './index.less';
import DataMenu from './DataMenu';
import { showDataMenu } from '../../../../../redux/actions/dataMenu';


class ContentMain extends PureComponent {

  static propTypes = {
    isCreateFolder: PropTypes.bool,
    changeCreateFolderStatus: PropTypes.func,
    listForm: PropTypes.string,
    setListForm: PropTypes.func,
    files: PropTypes.object,
    folder: PropTypes.object,
    setFolder: PropTypes.func,
    removeFolder: PropTypes.func,
    category: PropTypes.object,
    showDataMenu: PropTypes.func
  }

  state = {
    isListShow: false
  };

  // 通过父分类id，返回到某个目录下
  back = async (id, event) => {
    event.stopPropagation()
    // 设置redux中当前文件夹
    const {
      setFolder,
      removeFolder,
      category
    } = this.props;
    // 获取上一级文件夹对象
    if (id === '0') {
      removeFolder()
    } else {
      let {code, data} = await getFolderById(id)
      if (code === COMMON_SUCCESS_STATE) {
        setFolder(data)
      } else {
        message.error('返回目录异常，请稍后重试')
        return
      }
    }
    // 点击当前菜单项，刷新数据, 延迟点击，保证获取到最新的父分类id
    setTimeout(() => {
      category.target.click();
    }, 100)
  }

  // 显示数据菜单
  showDataMenu = (event) => {
    event.stopPropagation()
    if (event.button === 2) {

      const { showDataMenu } = this.props
      let x = event.clientX
      let y = event.clientY
      showDataMenu({
        x,
        y,
        visible: true
      })
    }
  }

  buildPath = (path) => path.map((item, index) => (
    <span key={item.id}>
      {
        index === path.length -1
          ?item.name:  <a onClick={(event) => this.back(item.id, event)}>
            {
              item.name
            }
          </a>
      }
      {
        (index !== path.length - 1)? <b>&gt;</b>: ''
      }
    </span>
  ))

  // 切换数据表格表现形式
  toggleDataList = (event) => {
    const { target } = event;
    let { setListForm } = this.props
    let { className } = target;
    if (className.indexOf('icon-grid') !== -1) {
      // className = className.replace('icon-grid', 'icon-list');
      setListForm('icon-list')
      // 切换为数据列表展示
      this.setState({
        isListShow: true,
      });
    } else {
      // className = className.replace('icon-list', 'icon-grid');
      setListForm('icon-grid')
      this.setState({
        isListShow: false,
      });
    }
  };

  render () {
    const { isListShow } = this.state;
    const {
      isCreateFolder,
      changeCreateFolderStatus,
      listForm,
      files: allFiles,
      category,
      folder
    } = this.props
    // 目录
    const directories = allFiles[DIRECTORIES] || [];
    // 文件
    const files = allFiles[FILES] || [];
    // 获取当前目录层级
    let parentId = (folder? folder.parentId: '0') || 0
    // 获取当前文件的路径
    let path
    if (folder.path && category.id === ALL_FILE) {
      path = JSON.parse(folder.path).reverse()
      path.push({id: folder.id, name: folder.name})
    }
    return (
      <>
        <div className="pan_content_main">
          <div className="pan_content_main_header">
            <div className="pan_content_main_header_left">
              {
                path === undefined || path.length === 0
                  ?'全部文件'
                  : <div className="pan_content_main_header_left_nav">
                    <span>
                      <a onClick={(event) => this.back(parentId, event)}>返回上一级</a>
                      <b>|</b>
                    </span>
                    <span>
                      <a onClick={(event) => this.back('0', event)}>全部文件</a>
                      <b>&gt;</b>
                    </span>
                    {
                      this.buildPath(path)
                    }
                  </div>

              }
            </div>
            <div className="pan_content_main_header_right">
              <span>已全部加载，共{directories.length +  files.length}个</span>
              <button className={'iconfont ' + listForm} onClick={this.toggleDataList}/>
            </div>
          </div>
          {/* 固定数据表格宽高度 */}
          <div className="data_box" onMouseUp={this.showDataMenu}>
            {/* 数据菜单*/}
            <DataMenu/>
            {/* 数据展示列表*/}
            <DataList style={{ display: isListShow ? 'block' : 'none' }}/>
            <DataGrid isCreateFolder={isCreateFolder}
              changeCreateFolderStatus={changeCreateFolderStatus}
              style={{ display: isListShow ? 'none' : 'block' }}/>
          </div>
        </div>
      </>
    );
  }
}

export default connect(
  (state) => ({
    listForm: state.listForm,
    files: state.files,
    folder: state.folder,
    category: state.category
  }), {
    setListForm,
    setFolder,
    removeFolder,
    showDataMenu
  }
)(ContentMain);
